<!DOCTYPE html>
<html>
<head>
	<title>Dissolve</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<!-- jQuery, -->
	<script src="jquery/jquery-1.9.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>
</head>

<body>

<p>Fade:<p>
<pre style="margin-top: -1em; margin-left: 1em;"><code>&lt;div class="fotorama"
     <mark>data-transition="dissolve"</mark>></code></pre>

<!-- Transition switches -->
<style>
	.switch {
		border-bottom: 1px dashed;
		cursor: pointer;
	}
	.switch.active {
		color: #fff;
		background-color: #333;
		border-bottom: none;
		border-radius: 3px;
		padding: 2px 4px;
		margin: 0 -4px;
		cursor: default;
	}
</style>
<script>
	$(function () {
		var fotorama = $('#dissolve').data('fotorama');

		$('.switch').on('click', function () {
			var $this = $(this);
			$this.addClass('active')
					.siblings().removeClass('active');

			fotorama.setOptions({transition: $this.text().toLowerCase()});
		});
	});
</script>
<p class="switch-group">
	<span class="switch active">Dissolve</span>
	&nbsp;
	<span class="switch">Crossfade</span>
</p>

<!-- Fotorama -->
<div class="fotorama"
     id="dissolve"
     data-nav="thumbs"
     data-transition="dissolve"
     data-width="700"
     data-ratio="700/467"
     data-max-width="100%"
     data-fit="cover"
     data-loop="true">
	<a href="i/orion-art/5-a.jpg"></a>
	<a href="i/orion-art/5-b.jpg"></a>
	<a href="i/orion-art/5-c.jpg"></a>
</div>

<!-- © -->
<p>Photos <a href="http://orion-art.com/">by Orion Art</a></p>
</body>
</html>